import { Tooltip } from "@mui/material";
import { GridActionsCellItem } from "@mui/x-data-grid";
import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import { useContext } from "react";
import Dataform from "../../../components/Dataform";
import { TitleContext } from "../../../router";
import GetChipType from "../../teacher/CourseApplication/GetChipType";
import CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";
import { renderCellExpand } from "../../../components/RenderCellExpand";
import GetDetail from "../../student/Quality/GetDetail";
const tmpCourse = [
  {
    id: 36,
    name: "学生在线总站长",
    beginTime: "2022-9",
    endTime: "2032-9",
    score: 0.0,
    status: 0,
    detail: "sdad",
    userName: "李四",
    participants: ["李四"],
    serviceAgency: null,
    organizer: null,
    duration: null,
  },
  {
    id: 37,
    name: "寒假实训",
    beginTime: "2022-12-01",
    endTime: "2022-12-08",
    score: 0.0,
    status: 0,
    detail: "实训项目",
    userName: "李四",
    participants: ["李四"],
    serviceAgency: "学生在线",
    organizer: null,
    duration: null,
  },
  {
    id: 39,
    name: "测试活动",
    beginTime: "2022-12-01",
    userName: "李四",
    endTime: "2022-12-08",
    score: 0.0,
    status: 0,
    detail: "测试",
    participants: ["李四", "李开炮"],
    serviceAgency: "学生在线",
    organizer: null,
    duration: null,
  },
  {
    id: 40,
    name: "我和lkp的故事",
    userName: "李四",
    beginTime: "2022-12-01",
    endTime: "2022-12-08",
    score: 0.0,
    status: 0,
    detail: "测试",
    participants: ["李四"],
    serviceAgency: "学生在线",
    organizer: null,
    duration: null,
  },
  {
    id: 41,
    name: "测试",
    beginTime: "2022-12-01",
    userName: "李四",
    endTime: "2022-12-03",
    score: 0,
    status: 0,
    detail: "测试",
    participants: ["李四"],
    serviceAgency: "测试",
    organizer: null,
    duration: null,
  },
  {
    id: 42,
    name: "测",
    beginTime: "2022-12-01",
    endTime: "2022-12-03",
    score: 0.0,
    status: 0,
    userName: "李四",
    detail: "测",
    participants: ["李四"],
    serviceAgency: "测试",
    organizer: null,
    duration: null,
  },
  {
    id: 43,
    name: "多人活动测试",
    beginTime: "2022-12-01",
    endTime: "2022-12-03",
    score: 0,
    userName: "李四",
    status: 0,
    detail: "多人活动",
    participants: ["李四"],
    serviceAgency: "测试",
    organizer: null,
    duration: null,
  },
  {
    id: 54,
    name: "测试",
    beginTime: "2022-12-02",
    endTime: "2022-12-08",
    score: 0,
    userName: "李四",
    status: 0,
    detail: "测试",
    participants: ["李四", "李开炮", "黎可漂"],
    serviceAgency: "测试",
    organizer: null,
    duration: null,
  },
];

export default function Volunteer(props) {
  const nowTitle = useContext(TitleContext);

  const [rows, setRows] = useState(
    props.rows
    // tmpCourse.map((val) => {
    //   return {
    //     ...val,
    //     participants: val.participants.join("\n"),
    //   };
    // })
  );

  const handleAcceptClick = (id) => {
    //这里实现通过申请接口
  };
  const handleRefuseClick = (id) => {
    //这里实现拒绝申请接口
  };
  const handleEdit = (newRow) => {
    //这是实现对于发展分的修改
    return newRow;
  };
  const columns = [
    {
      field: "id",
      headerName: "序号",
      flex: 1,
      editable: false,
    },
    {
      field: "name",
      renderCell: renderCellExpand,
      headerName: "活动名称",
      flex: 3,
    },
    {
      field: "userName",
      renderCell: renderCellExpand,
      headerName: "申请人",
      flex: 3,
    },
    {
      field: "serviceAgency",
      renderCell: renderCellExpand,
      headerName: "服务机构",
      flex: 3,
    },
    {
      field: "beginTime",
      type: "dateTime",
      renderCell: renderCellExpand,
      headerName: "开始时间",
      flex: 2,
      // width: 150,
    },
    {
      type: "dateTime",
      renderCell: renderCellExpand,
      field: "endTime",
      headerName: "结束时间",
      // width: 150,
      flex: 2,
    },
    {
      field: "detail",
      headerName: "详情",
      hideable: false,
      // flex: 3,
      width: 100,
      renderCell: GetDetail,
    },
    {
      field: "score",
      headerName: "发展分",
      flex: 2,
      editable: true,
    },
    // {
    //   field: "participants",
    //   // renderCell: renderCellExpand,
    //   renderCell: GetDetail,
    //   headerName: "团队成员",
    //   width: 100,
    // },
    {
      field: "status",
      headerName: "状态",
      renderCell: GetChipType,
      width: 150,
    },
    {
      field: "actions",
      type: "actions",
      headerName: "操作",
      width: 100,
      cellClassName: "actions",
      getActions: ({ id }) => {
        return [
          <Tooltip title="通过">
            <GridActionsCellItem
              icon={<CheckIcon />}
              label="Delete"
              onClick={() => props.handleAcceptClick(id)}
              color="inherit"
            />
          </Tooltip>,
          <Tooltip title="驳回">
            <GridActionsCellItem
              icon={<CloseIcon />}
              label="重置密码"
              onClick={() => props.handleRefuseClick(id)}
              color="inherit"
            />
          </Tooltip>,
        ];
      },
    },
  ];

  return (
    <div>
      <Dataform
        processRowUpdate={props.processRowUpdate}
        editMode="cell"
        fileName="志愿服务申请"
        columns={columns}
        rows={rows}
      />
    </div>
  );
}
